<template>
  <div>
    <div style="width: 100%; height: 30px; float: left; background-color: white;">
      <el-button type="warning" size="small" link style="float: right; margin-right: 18px;margin-top: 9px;"
        @click="reback()">返 回</el-button>
    </div>
    <div class="report_box">
      <div class="report_edit">
        <div class="btn_top">
          <div style="font-size: 14px; padding: 5px;">
            <p>应用名称：<span>{{ checkedTemplate.applicationName }}</span></p>
            <p style="">模板名称：<span>{{ checkedTemplate.name }}</span></p>
          </div>
          <div>
            <el-button type="primary" @click="analysis('pdf')" :disabled="btn_disabled">Pdf</el-button>
            <el-button type="primary" @click="analysis('html')" :disabled="btn_disabled">Html</el-button>
          </div>
        </div>
        <div>
          <!-- <el-popover placement="bottom" width="400" trigger="hover">
                        <el-table :data="fileList">
                            <el-table-column width="100" property="indx" label="序号"></el-table-column>
                            <el-table-column width="200" property="name" label="文件名"></el-table-column>
                        </el-table>
                        <p class="textarea_p" slot="reference"><el-tag>用户文件</el-tag><span
                                style="font-size: 12px; color: red;">（*鼠标悬浮显示）</span></p>
                    </el-popover> -->
          <el-upload width="400" class="upload-dialog" ref="upload" :action="uploadAction" :show-file-list="false"
            :on-change="submitUpload" :on-success="uploadFileSuccess" :headers="headers" :auto-upload="false">
            <el-button slot="trigger" style="margin-left: 5px" type="success">上传模板封面</el-button>
            <el-button style="margin-left: 10px" type="primary" @click="openSampleDataDialog">查看应用输出参数</el-button>
            <el-button style="margin-left: 10px" type="warning" @click="editApplication()">编辑应用</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </div>
        <div style="height: 28px">
          <el-switch v-model="showTemplate" active-text="有封面" inactive-text="无封面"></el-switch>
          <el-switch style="margin-left: 20px" v-model="parseOrganism" active-text="解析微生物"
            inactive-text="不解析微生物"></el-switch>
          <el-switch style="margin-left: 20px;" v-model="markdownTemplate" @change="markdownTemplateChange"
            active-text="Markdown" inactive-text="Html"></el-switch>
          <el-button style="float: right;" type="success" icon="el-icon-refresh"
            @click="refreshTemplate()">刷新模板</el-button>
          <!-- <i class="el-icon-refresh refreshTemplate" @click="refreshTemplate()"></i> -->
        </div>
        <!-- <div style="height: 28px">
                    <el-switch v-model="markdownTemplate" @change="markdownTemplateChange" active-text="Markdown" inactive-text="Html"></el-switch>
                </div> -->
        <div class="textarea_text">

          <el-tabs type="border-card">
            <el-tab-pane :label="markdownTemplate ? '编辑Markdown' : '编辑Html'" @mouseleave.native="hideSearchResults">
              <codemirror id="codemirrorDiv" ref="codemirrorEdit1" v-model="codeContent" :options="cmOptions"
                @mousedown.native="getPosition" @cursorActivity="handleClick" />

              <div v-if="showSearchBox" class="search-box" :style="windowPosStyle">
                <el-input type="text" v-model="searchText" placeholder="请输入搜索内容" @keyup.enter.native="searchData()"
                  @change.native="searchData()"></el-input>
                <ul class="list_data">
                  <li @click="giveData(result)" v-for="result in searchResults" :key="result.id">
                    {{ result.articleTitle }}
                  </li>
                </ul>
              </div>
            </el-tab-pane>

            <el-tab-pane label="模板样式">
              <codemirror class="codemirrorDiv" id="codemirrorDiv" ref="codemirrorEdit" v-model="cssCodeContent"
                :options="cmOptions" />
            </el-tab-pane>
            <el-tab-pane label="PDF 页眉">
              <codemirror class="codemirrorDiv" id="codemirrorDiv3" ref="codemirrorEdit3" v-model="pdfHeaderContent"
                :options="cmOptions" />
            </el-tab-pane>
            <el-tab-pane label="PDF 页脚">
              <codemirror class="codemirrorDiv" id="codemirrorDiv4" ref="codemirrorEdit4" v-model="pdfFooterContent"
                :options="cmOptions" />
            </el-tab-pane>
            <el-button type="warning" class="saveButton" @click="saveTemplate()">更新模板</el-button>
          </el-tabs>
        </div>
      </div>
      <div class="report_show" v-loading="loadings" element-loading-text="加载中...">
        <iframe id="iframeDiv" v-if="!htmlErrorDoc" width="100%" height="98%" frameborder="no" allowtransparency="true"
          :src="htmlPdUrl"></iframe>
        <div v-else>
          {{ htmlErrorDoc }}
        </div>
        <!-- <iframe id="iframeDiv1" v-else width="100%" height="98%" frameborder="no" allowtransparency="true"
          :srcdoc="htmlErrorDoc" charset="utf-8">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
          </head>
        </iframe> -->
        <!-- <el-button type="warning" class="saveButton1" @click="iframeFullScreen('iframeDiv')">全屏显示</el-button> -->
        <!-- <el-button type="warning" class="uploadSampleButton" @click="uploadSampleReport()">上传样本报告</el-button> -->
      </div>

      <el-dialog :visible.sync="dialog.visible" title="应用输出参数" width="700px" :close-on-click-modal="false"
        :before-close="closeDialog">
        <el-table v-loading="loading" :data="applicationData" highlight-current-row border height="500px">
          <el-table-column label="序号" width="55" type="index" />
          <el-table-column label="KEY" prop="key" width="240" />
          <el-table-column label="值" prop="val" />
        </el-table>
      </el-dialog>

      <el-dialog :visible.sync="addKvDialog.visible" title="添加键值对" width="400px" :close-on-click-modal="false"
        :before-close="closeAddKvDialog">
        <el-form ref="formAddKv" :model="kvForm" label-width="80px">
          <el-form-item label="键">
            <el-input placeholder="请输入键信息" v-model="kvForm.key"> </el-input>
          </el-form-item>
          <el-form-item label="值">
            <el-input placeholder="请输入值信息" v-model="kvForm.value" type="textarea" :rows="6"> </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="saveSampleKv">保 存</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog :visible.sync="dialog_visible_edit" title="编辑应用" width="80%">
        <el-form ref="userFormRef" :model="formData" label-width="100px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入应用名称" />
          </el-form-item>
          <el-form-item label="输入参数" prop="runArgsContent">
            <codemirror class="runArgsContent" ref="codemirrorRunEdit" v-model="runArgsContent" :options="cmOptions" />
          </el-form-item>
          <el-form-item label="输出参数" prop="retArgsContent">
            <codemirror class="runArgsContent" ref="codemirrorRetEdit" v-model="retArgsContent" :options="cmOptions" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addOrUpdate()">确 定</el-button>
            <el-button @click="dialog_visible_edit = false">取 消</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { Session } from '@/utils/storage';
import reportTemplateApi from '@/api/report/template';
import reportIndexApi from '@/api/report';
import reportSampleApi from '@/api/report/reportSample';
import dfApplicationApi from '@/api/analysis/application'

import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

import 'codemirror/mode/javascript/javascript.js';
import "codemirror/mode/markdown/markdown.js";
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/vue/vue.js';
import '../template/setting.js';
export default {
  name: 'reportDesignIndex',
  components: { codemirror },
  props: {
    checkedTemplate: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      loadings: false,
      btn_disabled: false,
      dialog_visible_edit: false,
      runArgsContent: '',
      retArgsContent: '',
      formData: {},
      applicationId: "",
      cmOptions: {
        tabSize: 2, // tab
        styleActiveLine: true,
        lineNumbers: true, // 换行操作
        lineWrapping: true, // 换行操作
        styleSelectedText: true,
        line: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        mode: 'application/json',
        hintOptions: {
          completeSingle: false,
        },
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai',
        // theme: 'solarized',
        extraKeys: {},
      },

      templateForm: {},
      templateFormId: '',
      templateList: [],
      userSampleList: [],
      formData: {},
      textarea: '',
      fileList: [],

      htmlContent: '',
      htmlPdUrl: '',

      cmOptions: {
        tabSize: 2, // tab
        styleActiveLine: true,

        lineNumbers: true, // 换行操作
        lineWrapping: true, // 换行操作

        styleSelectedText: true,
        line: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        mode: 'text/markdown',
        hintOptions: {
          completeSingle: false,
        },
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai',
        // theme: 'solarized',
        extraKeys: {
          Ctrl: 'autocomplete',
          'Ctrl-F': this.openSearch,
          // 'Ctrl-s': this.saveTemplate
          // 'Ctrl-F': function (cm) {
          //     cm.execCommand('find') // 打开搜索框
          // },
        },
      },
      codeContent: '',
      fullscreen: false,

      loading: false,
      cssCodeContent: '',

      headers: {},
      uploadAction: '',

      dialog: {},
      templateDataListMap: {},
      templateDataListMapKv: [],
      templateDataListMapTab: [],
      templateDataListMapPicture: [],

      showTemplate: false,
      parseOrganism: false,

      markdownDialog: {},
      markdownCodeContent: '',
      markdownTemplate: true,

      addKvDialog: {},
      imageUploadAction: '',
      csvUploadAction: '',
      kvForm: {},
      showSearchBox: false,
      searchText: '',
      searchResults: [],
      pos: {},
      windowPosStyle: {},

      version: 0,

      pdfHeaderContent: '',
      pdfFooterContent: '',

      applicationData: [],

      htmlErrorDoc: null,
    };
  },
  watch: {
    // 监听输入框变化，调用搜索接口
    searchText(newValue, oldValue) {
      let param = {
        number: 1,
        size: 5,
        articleTitle: newValue,
      };
      reportSampleApi.publication(param).then((res) => {
        this.searchResults = res.data.content;
      });
    },
  },
  created() {
    //let templateId = this.$route.query.templateId;
    this.init();
  },
  codemirror() {
    return this.$refs.codemirrorEdit1.codemirror;
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.saveContent)
  },
  mounted() {
    document.addEventListener('keydown', this.saveContent)
    this.getPubication(); //获取文献分页列表

    this.headers = {
      Authorization: 'Bearer ' + localStorage.getItem('token'),
    };
    // Ctrl+s 保存编辑模板数据
    // window.addEventListener('keydown', (event) => {
    //     if (event.ctrlKey && event.key === 's') {
    //         this.saveTemplate();
    //         event.preventDefault(); // 阻止默认的保存操作（如浏览器保存页面）
    //     }
    // });
    // this.$refs.codemirrorEdit.codemirror.on('cursorActivity', this.getCursorPosition); // 绑定 cursorActivity 事件
  },
  methods: {
    reback() {
      this.$emit("close");
    },
    saveContent(e) {
      var key = window.event.keyCode ? window.event.keyCode : window.event.which
      if (key === 83 && e.ctrlKey) {
        this.saveTemplate()
        e.preventDefault()
      }
    },
    refreshTemplate() {
      reportTemplateApi.get(this.templateFormId).then((res) => {
        this.templateForm = res.data;
        this.templateFormId = res.data.id;
        this.uploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/template/upload-file/' + res.data.id;
        this.codeContent = res.data.markdownContent ? res.data.markdownContent : '';
        this.cssCodeContent = res.data.innerCssContent ? res.data.innerCssContent : '';
        this.$message({ message: '模板刷新成功！', type: 'success' });
      });
    },
    // 隐藏弹窗
    handleClick() {
      this.showSearchBox = false;
    },
    //获取文献分页列表
    getPubication() {
      let param = {
        number: 1,
        size: 5,
      };
      reportSampleApi.publication(param).then((res) => {
        this.searchResults = res.data.content;
      });
    },
    // Ctrl+F 展示list框
    openSearch() {
      this.showSearchBox = true;
    },
    // 鼠标离开
    hideSearchResults() {
      // this.showSearchBox = false;
    },
    getPosition(event) {
      this.pos = this.$refs.codemirrorEdit1.codemirror.getCursor(); // 获取鼠标光标

      let topOffset = 80;
      this.windowPosStyle = { top: event.clientY + topOffset + 'px', left: event.clientX + 60 + 'px' };

      // this.$refs.codemirrorEdit.codemirror.refresh(); // 重新渲染 CodeMirror 实例
    },

    // 点击list行数据
    giveData(data) {
      let pos2 = {
        line: this.pos.line, //行号
        ch: this.pos.ch, //光标位置
      };
      this.$refs.codemirrorEdit1.codemirror.replaceRange(`[^` + data.id + `]`, pos2); //替换内容

      this.showSearchBox = false; // 隐藏弹窗
    },
    // list 搜索数据
    searchData() {
      let param = {
        number: 1,
        size: 5,
        articleTitle: this.searchText,
      };
      reportSampleApi.publication(param).then((res) => {
        this.searchResults = res.data.content;
      });
    },

    uploadDataFileSuccess() {
      this.$message({ message: '文件上传成功！', type: 'success' });
      this.getThymeleafData();
    },
    getThymeleafData() {
      reportIndexApi.getThymeleafData(this.templateFormId, false).then((res) => {
        let data = res.data;
        let kvData = data['kv'];
        let kvList = [];
        for (var v in kvData) {
          kvList.push({
            key: v,
            value: JSON.stringify(kvData[v]),
          });
        }
        this.templateDataListMapKv = kvList;

        let tabData = data['tab'];
        let tabList = [];
        for (var v in tabData) {
          tabList.push({
            key: v,
            value: tabData[v],
          });
        }
        this.templateDataListMapTab = tabList;

        let pictureData = data['picture'];
        let pictureList = [];
        for (var v in pictureData) {
          pictureList.push({
            key: v,
            value: pictureData[v],
          });
        }
        this.templateDataListMapPicture = pictureList;
      });
    },
    submitCsvUpload(file, fileList) {
      this.$refs.uploadCsv.submit();
    },
    submitImageUpload(file, fileList) {
      this.$refs.imageUpload.submit();
    },
    saveSampleKv() {
      let kvForm = this.kvForm;
      kvForm.id = this.formData.sampleId;
      reportSampleApi.addKv(kvForm).then((res) => {
        this.$set(this.addKvDialog, 'visible', false);
        this.$message({ message: '键值对添加成功！', type: 'success' });
        this.getThymeleafData();
      });
    },
    closeAddKvDialog() {
      this.$set(this.addKvDialog, 'visible', false);
    },
    openAddKvDialog() {
      this.$set(this.addKvDialog, 'visible', true);
    },
    markdownTemplateChange() {
      // if (this.markdownTemplate) {
      // 	this.codeContent = this.templateForm.markdownContent ? this.templateForm.markdownContent : '';
      // } else {
      // 	this.codeContent = this.templateForm.innerContent ? this.templateForm.innerContent : '';
      // }
    },
    markdownToHtml() {
      reportIndexApi.markdownToHtml({ markdownContent: this.markdownCodeContent }).then((res) => {
      });
    },
    closeMarkdownDialog() {
      this.$set(this.markdownDialog, 'visible', false);
    },
    openMarkdownDialog() {
      this.$set(this.markdownDialog, 'visible', true);
    },
    closeDialog() {
      this.$set(this.dialog, 'visible', false);
    },
    // 查看样本数据
    openSampleDataDialog() {
      this.imageUploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/seq-sample-data/upload-image/' + this.formData.sampleId;
      this.csvUploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/seq-sample-data/upload-csv/' + this.formData.sampleId;
      reportIndexApi.getThymeleafData(this.templateFormId, false).then((res) => {
        let data = res.data;
        console.log(data)
        for (let k in data) {
          this.applicationData.push({
            key: k,
            val: data[k]
          })
        }
        this.$set(this.dialog, 'visible', true);
        this.$set(this.dialog, 'title', '用户样本数据');
      });
    },
    uploadFileSuccess() {
      this.$message({ message: '文件上传成功！', type: 'success' });
    },
    submitUpload(file, fileList) {
      this.$refs.upload.submit();
    },
    // 上传样本报告
    uploadSampleReport() {
      if (!this.formData.sampleId) {
        this.$message.error('没有选择用户样本，不能上传样本报告！');
        return;
      }
      // reportSampleApi.uploadReportSample(this.formData.sampleId).then((v) => {
      // 	this.$message({ message: '样本报告上传成功！', type: 'success' });
      // });
    },
    iframeFullScreen(id) {
      let element = document.getElementById(id);
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },
    // 模板目录
    changeTemplate(val) {
      reportTemplateApi.get(val).then((res) => {
        this.templateForm = res.data;
        this.templateFormId = res.data.id;
        this.uploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/template/upload-file/' + res.data.id;
        this.codeContent = res.data.markdownContent ? res.data.markdownContent : '';
        this.cssCodeContent = res.data.innerCssContent ? res.data.innerCssContent : '';
        this.pdfHeaderContent = res.data.pdfHeaderContent ? res.data.pdfHeaderContent : '';
        this.pdfFooterContent = res.data.pdfFooterContent ? res.data.pdfFooterContent : '';
        this.version = res.data.version;
      });
    },
    // 更新模板
    saveTemplate() {
      if (!this.templateForm.id) {
        this.$message.error('没有需要保存的模板，请先在【报告模板管理】中创建模板！');
        return;
      }
      // if (this.markdownTemplate) {
      // 	this.templateForm.markdownContent = this.codeContent;
      // } else {
      // 	this.templateForm.innerContent = this.codeContent;
      // }
      this.templateForm.markdownContent = this.codeContent;
      this.templateForm.innerCssContent = this.cssCodeContent;
      this.templateForm.pdfHeaderContent = this.pdfHeaderContent;
      this.templateForm.pdfFooterContent = this.pdfFooterContent;
      this.templateForm.version = this.version;

      reportTemplateApi.update(this.templateForm).then((res) => {
        if (res.businessCode && res.businessCode == 10001) {
          this.$confirm('检测到当前修改的模板内容与服务器内容存在冲突，请选择处理冲突的方式！', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '服务器覆盖本地',
            cancelButtonText: '本地覆盖服务器'
          }).then(() => {
            reportTemplateApi.get(this.templateFormId).then((res) => {
              this.templateForm = res.data;
              this.templateFormId = res.data.id;
              this.uploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/template/upload-file/' + res.data.id;
              this.codeContent = res.data.markdownContent ? res.data.markdownContent : '';
              this.cssCodeContent = res.data.innerCssContent ? res.data.innerCssContent : '';
              this.pdfHeaderContent = res.data.pdfHeaderContent ? res.data.pdfHeaderContent : '';
              this.pdfFooterContent = res.data.pdfFooterContent ? res.data.pdfFooterContent : '';
              this.version = this.templateForm.version;
              this.$message({ message: '服务器覆盖本地 - 模板刷新成功！', type: 'success' });
            });
          }).catch(action => {
            reportTemplateApi.get(this.templateFormId).then((res) => {
              this.templateForm = res.data;
              this.templateFormId = res.data.id;
              this.version = this.templateForm.version;
              this.saveTemplate();
            });
          });
          return;
        }
        if (res.error) {
          this.$message({ message: '模板更新失败！', type: 'error' });
          this.htmlErrorDoc = res.data;
          return;
        } else {
          this.version = res.data.version;
          this.$message({ message: '模板更新成功！', type: 'success' });
          this.analysis('html')
        }
      });
    },
    init() {
      this.getTemplateList();
      //this.getUserSampleList();
    },
    // 用户信息列表
    getUserSampleList() {
      reportSampleApi.list().then((res) => {
        let datas = res.data;
        datas.forEach((v) => {
          v.showText = v.number + ' (' + v.userName + ')';
        });
        this.userSampleList = datas;
        this.formData.sampleId = this.userSampleList && this.userSampleList.length != 0 ? this.userSampleList[0].id : '';
      });
    },
    // 模板目录列表
    getTemplateList() {
      reportTemplateApi.get(this.checkedTemplate.id).then(res => {
        let data = res.data;
        this.applicationId = data.applicationId;

        this.templateForm = data;
        this.templateFormId = data.id;
        this.uploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/template/upload-file/' + this.checkedTemplate.id;
        this.codeContent = data.markdownContent ? data.markdownContent : '';
        this.pdfHeaderContent = data.pdfHeaderContent ? data.pdfHeaderContent : '';
        this.pdfFooterContent = data.pdfFooterContent ? data.pdfFooterContent : '';
        this.cssCodeContent = data.innerCssContent ? data.innerCssContent : '';
        this.version = data.version;
      })
    },
    // 文件列表
    selectUserSample() {
      this.$forceUpdate()
    },
    // 解析
    analysis(parseMode) {
      this.htmlErrorDoc = null;
      this.htmlPdUrl = '';
      if (!this.templateFormId) {
        this.$message.error('没有选择模板，不能解析！');
        return;
      }
      // const loading = this.$loading({
      //     lock: true,
      //     text: 'PDF 解析中',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)',
      // });
      this.loadings = true;
      this.btn_disabled = true; // 禁用pdf、html按钮

      let formData = this.formData;
      formData.markdownTemplate = this.markdownTemplate;
      formData.content = this.codeContent;
      formData.cssContent = this.cssCodeContent;
      formData.templateId = this.templateFormId;
      formData.showTemplate = this.showTemplate;
      formData.hasOrganism = this.parseOrganism;
      formData.pdfHeaderContent = this.pdfHeaderContent;
      formData.pdfFooterContent = this.pdfFooterContent;
      formData.version = this.version;
      reportIndexApi.parseReport(formData).then((res1) => {
        if (res1.error) {
          this.$message.error('模板解析失败！');
          this.htmlErrorDoc = res1.data;
          this.loadings = false;
          return;
        }
        if (parseMode == 'pdf') {
          reportIndexApi.genePdf(this.templateFormId, this.showTemplate, null, false).then((res) => {
            this.loadings = false;
            this.btn_disabled = false;

            let result = res;
            var binaryData = [];
            binaryData.push(result);
            // 解析文件类型为pdf类型的文件流
            let Blobs = new Blob(binaryData, { type: 'application/pdf' });
            this.htmlPdUrl = URL.createObjectURL(Blobs);
          });
        } else if (parseMode == 'html') {
          this.htmlPdUrl = process.env.VUE_APP_FILE_API_PREV + '/service-platform/report/download-pdf?templateId=' + formData.templateId;
          this.loadings = false;
          this.btn_disabled = false;
        }
      });
    },

    // 编辑应用
    editApplication() {
      this.dialog_visible_edit = true;
      dfApplicationApi.get(this.applicationId).then((res) => {
        let data = res.data;

        this.formData = data;
        this.runArgsContent = data.runArgsContent;
        this.retArgsContent = data.retArgsContent;
      });
    },

    addOrUpdate() {
      this.formData.runArgsContent = this.runArgsContent;
      this.formData.retArgsContent = this.retArgsContent;
      dfApplicationApi.update(this.formData).then((res) => {
        this.$message({ message: '数据应用更新成功！', type: 'success' });
        this.dialog_visible_edit = false;
      });
    },
  },
};
</script>

<style scoped>
/deep/.el-tabs__content {
  height: calc(100vh - 385px) !important;
}

.refreshTemplate {
  position: absolute;
  top: 21%;
  right: 52%;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

.saveButton {
  position: absolute;
  bottom: 4%;
  right: 8%;
}

.uploadSampleButton {
  position: absolute;
  bottom: 4%;
  right: 3%;
}

.report_box {
  width: 100%;
  display: flex;
  /* height: 1000px; */
  background-color: white;
  /* background-color: pink; */
  /* border: 1px solid #dee2e6!important; */
  padding: 1%;
  /* min-height: 850px; */
  height: calc(100vh - 150px);
  overflow: hidden;
}

.report_edit {
  padding: 1%;
  border: 1px solid #dee2e6 !important;
  width: 50%;
  /* display: flex; */
}

/deep/.btn_top .el-form {
  display: flex !important;
}

/* .el-form-item {
    width: 40%;
} */

.report_show {
  padding: 1%;
  border: 1px solid #dee2e6 !important;
  width: 50%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.textarea_text {
  margin-top: 3%;
}

.textarea_p {
  margin-bottom: 6px;
  margin-left: 10px;
  font-size: 20px;
}

ul {
  margin-top: 1%;
}

ul li {
  list-style: none;
  margin-bottom: 6px;
  /* margin-left: 18px; */
}

.jiexi_style {
  height: 40px;
  margin-left: 5px;
}

.btn_top {
  display: flex;
  justify-content: space-between;
}

.search-box {
  position: fixed;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 10px 30px;
  border: 1px solid #ccc;
  z-index: 999;
}

.search-box ul li {
  cursor: pointer;
  margin-bottom: 8%;
}

.list_data {
  margin-top: 10%;
}

/deep/.runArgsContent .CodeMirror-line {
  line-height: 15px !important;

}

/deep/.runArgsContent {
  height: 260px;
  overflow: auto;
}

/deep/.runArgsContent .CodeMirror-linenumber {
  line-height: 15px !important;

}
</style>
